<template>
  <div class="Person_5">
    <h2>一辆{{ car.brand }}车</h2>
    <p>型号: {{ car.model }}</p>
    <p>年份: {{ car.year }}</p>
    <button @click="changeyear">修改年份</button>
    <button @click="changecar">修改汽车</button>
    <h3>游戏列表:</h3>
    <ul>
      <li v-for="gameItem in game" :key="gameItem.id">
        {{ gameItem.name }}
      </li>
    </ul>
    <button @click="changefirstgame">修改第一个游戏名称</button>
    <button @click="changegame">修改游戏</button>
  </div>
</template>
<script lang="ts" setup name="Person_5">
import { ref, reactive } from 'vue'

const car = reactive({
  brand: 'Toyota',
  model: 'Corolla',
  year: 2020,
})
const game = ref([
  {
    id: 1,
    name: 'The Witcher 3',
  },
  {
    id: 2,
    name: 'Cyberpunk 2077',
  },
  {
    id: 3,
    name: 'Elden Ring',
  },
])
function changefirstgame() {
  game.value[0].name = 'Final Fantasy VII Remake'
  alert(`第一个游戏已更改为 ${game.value[0].name}`)
}
function changegame() {
  game.value = [
    {
      id: 1,
      name: 'Hades',
    },
    {
      id: 2,
      name: 'Stardew Valley',
    },
    {
      id: 3,
      name: 'Celeste',
    },
  ]
  alert('游戏列表已更改')
}
function changecar() {
  Object.assign(car, {
    brand: 'Honda',
    model: 'Civic',
    year: 2021,
  })
}
const changeyear = () => {
  car.year = 2021
  alert(`车的年份已更改为 ${car.year}`)
}
console.log(car)
console.log(Proxy)
console.log(game)
// 这里可以添加 Vue 3 的 setup 语法
</script>
<style scoped></style>
